<template>
	<view class="page">
		<!-- 头像编辑 -->
		<view class="avatar-section">
			<view class="avatar-container" @click="chooseAvatar">
				<image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
				<view class="avatar-overlay">
					<image src="/static/svg/camera-large.svg" class="camera-icon" />
					<text class="camera-text">更换头像</text>
				</view>
			</view>
		</view>

		<!-- 表单编辑区域 -->
		<view class="form-section">
			<!-- 昵称 -->
			<view class="form-item">
				<text class="form-label">昵称</text>
				<input class="form-input" v-model="userInfo.nickname" placeholder="请输入昵称" maxlength="20" />
			</view>

			<!-- 个人简介 -->
			<view class="form-item">
				<text class="form-label">个人简介</text>
				<textarea class="form-textarea" v-model="userInfo.bio" placeholder="写点什么来介绍一下自己吧~" maxlength="100" />
			</view>

			<!-- 性别 -->
			<view class="form-item" @click="showGenderPicker">
				<text class="form-label">性别</text>
				<view class="form-value">
					<text class="value-text">{{ genderOptions[userInfo.gender] }}</text>
					<image src="/static/svg/dropdown.svg" class="arrow-icon" />
				</view>
			</view>

			<!-- 生日 -->
			<view class="form-item" @click="showDatePicker">
				<text class="form-label">生日</text>
				<view class="form-value">
					<text class="value-text">{{ userInfo.birthday || '请选择生日' }}</text>
					<image src="/static/svg/dropdown.svg" class="arrow-icon" />
				</view>
			</view>

			<!-- 手机号 -->
			<view class="form-item" @click="showPhoneModal">
				<text class="form-label">手机号</text>
				<view class="form-value">
					<text class="value-text">{{ userInfo.phone || '未绑定' }}</text>
					<image src="/static/svg/dropdown.svg" class="arrow-icon" />
				</view>
			</view>

			<!-- 地区 -->
			<view class="form-item" @click="showRegionPicker">
				<text class="form-label">地区</text>
				<view class="form-value">
					<text class="value-text">{{ userInfo.region || '请选择地区' }}</text>
					<image src="/static/svg/dropdown.svg" class="arrow-icon" />
				</view>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="save-section">
			<button class="save-btn" @click="saveProfile" :disabled="saving">
				<text class="save-text">{{ saving ? '保存中...' : '保存' }}</text>
			</button>
		</view>

		<!-- 性别选择器 -->
		<picker v-if="showGenderPickerFlag" :value="genderIndex" :range="Object.values(genderOptions)" @change="onGenderChange" @cancel="hideGenderPicker">
		</picker>

		<!-- 日期选择器 -->
		<picker v-if="showDatePickerFlag" mode="date" :value="userInfo.birthday" @change="onDateChange" @cancel="hideDatePicker">
		</picker>

		<!-- 地区选择器 -->
		<picker v-if="showRegionPickerFlag" mode="region" :value="regionArray" @change="onRegionChange" @cancel="hideRegionPicker">
		</picker>

		<!-- 手机号修改弹窗 -->
		<uni-popup ref="phonePopup" type="center">
			<view class="phone-modal">
				<view class="modal-header">
					<text class="modal-title">修改手机号</text>
					<view class="modal-close" @click="hidePhoneModal">
						<image src="/static/svg/minus.svg" class="close-icon" />
					</view>
				</view>
				<view class="modal-content">
					<input class="phone-input" v-model="newPhone" placeholder="请输入新手机号" type="number" maxlength="11" />
					<input class="code-input" v-model="verifyCode" placeholder="请输入验证码" type="number" maxlength="6" />
					<button class="send-code-btn" @click="sendVerifyCode" :disabled="codeSending">
						{{ codeSending ? '发送中...' : '发送验证码' }}
					</button>
				</view>
				<view class="modal-footer">
					<button class="modal-btn cancel-btn" @click="hidePhoneModal">取消</button>
					<button class="modal-btn confirm-btn" @click="confirmPhoneChange">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'

// 用户信息
const userInfo = reactive({
	avatar: '/static/svg/avatar-male.svg',
	nickname: '小明同学',
	bio: '热爱生活，享受每一天 ✨',
	gender: 1, // 0: 女, 1: 男, 2: 保密
	birthday: '1995-06-15',
	phone: '138****5678',
	region: '北京市 北京市 朝阳区'
})

// 保存状态
const saving = ref(false)

// 性别选择器
const showGenderPickerFlag = ref(false)
const genderOptions = {
	0: '女',
	1: '男', 
	2: '保密'
}
const genderIndex = computed(() => userInfo.gender)

// 日期选择器
const showDatePickerFlag = ref(false)

// 地区选择器
const showRegionPickerFlag = ref(false)
const regionArray = computed(() => userInfo.region ? userInfo.region.split(' ') : [])

// 手机号修改
const newPhone = ref('')
const verifyCode = ref('')
const codeSending = ref(false)

// 选择头像
const chooseAvatar = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['compressed'],
		sourceType: ['album', 'camera'],
		success: (res) => {
			userInfo.avatar = res.tempFilePaths[0]
			uni.showToast({
				title: '头像已更新',
				icon: 'success'
			})
		},
		fail: () => {
			uni.showToast({
				title: '取消选择',
				icon: 'none'
			})
		}
	})
}

// 显示性别选择器
const showGenderPicker = () => {
	showGenderPickerFlag.value = true
}

const hideGenderPicker = () => {
	showGenderPickerFlag.value = false
}

const onGenderChange = (e) => {
	userInfo.gender = e.detail.value
	hideGenderPicker()
}

// 显示日期选择器
const showDatePicker = () => {
	showDatePickerFlag.value = true
}

const hideDatePicker = () => {
	showDatePickerFlag.value = false
}

const onDateChange = (e) => {
	userInfo.birthday = e.detail.value
	hideDatePicker()
}

// 显示地区选择器
const showRegionPicker = () => {
	showRegionPickerFlag.value = true
}

const hideRegionPicker = () => {
	showRegionPickerFlag.value = false
}

const onRegionChange = (e) => {
	userInfo.region = e.detail.value.join(' ')
	hideRegionPicker()
}

// 手机号修改弹窗
const showPhoneModal = () => {
	// 这里应该使用uni-popup组件，为了简化我们使用系统弹窗
	uni.showModal({
		title: '修改手机号',
		content: '此功能需要验证身份，确认要修改吗？',
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				})
			}
		}
	})
}

const hidePhoneModal = () => {
	// 隐藏弹窗逻辑
}

const sendVerifyCode = () => {
	if (!newPhone.value || newPhone.value.length !== 11) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
		return
	}
	
	codeSending.value = true
	setTimeout(() => {
		codeSending.value = false
		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		})
	}, 2000)
}

const confirmPhoneChange = () => {
	if (!newPhone.value || !verifyCode.value) {
		uni.showToast({
			title: '请完善信息',
			icon: 'none'
		})
		return
	}
	
	userInfo.phone = newPhone.value.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
	hidePhoneModal()
	uni.showToast({
		title: '手机号修改成功',
		icon: 'success'
	})
}

// 保存个人资料
const saveProfile = async () => {
	if (!userInfo.nickname.trim()) {
		uni.showToast({
			title: '请输入昵称',
			icon: 'none'
		})
		return
	}

	saving.value = true
	
	try {
		// 模拟保存请求
		await new Promise(resolve => setTimeout(resolve, 1500))
		
		uni.showToast({
			title: '保存成功',
			icon: 'success'
		})
		
		// 延迟返回上一页
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
		
	} catch (error) {
		uni.showToast({
			title: '保存失败，请重试',
			icon: 'none'
		})
	} finally {
		saving.value = false
	}
}
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
	padding-bottom: 20px;
}

/* 头像编辑区域 */
.avatar-section {
	display: flex;
	justify-content: center;
	padding: 40px 20px;
	background: white;
	margin-bottom: 20px;
}

.avatar-container {
	position: relative;
	width: 120px;
	height: 120px;
	border-radius: 60px;
	overflow: hidden;
}

.avatar {
	width: 100%;
	height: 100%;
	border-radius: 60px;
}

.avatar-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.avatar-container:active .avatar-overlay {
	opacity: 1;
}

.camera-icon {
	width: 32px;
	height: 32px;
	margin-bottom: 8px;
	filter: brightness(0) invert(1);
}

.camera-text {
	color: white;
	font-size: 12px;
}

/* 表单区域 */
.form-section {
	background: white;
	margin-bottom: 20px;
}

.form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	font-size: 16px;
	color: #333;
	font-weight: 500;
	min-width: 80px;
}

.form-input {
	flex: 1;
	font-size: 16px;
	color: #333;
	text-align: right;
	margin-left: 20px;
}

.form-textarea {
	flex: 1;
	font-size: 16px;
	color: #333;
	text-align: right;
	margin-left: 20px;
	min-height: 60px;
	line-height: 1.5;
}

.form-value {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: flex-end;
	margin-left: 20px;
}

.value-text {
	font-size: 16px;
	color: #666;
	margin-right: 8px;
}

.arrow-icon {
	width: 16px;
	height: 16px;
	transform: rotate(270deg);
}

/* 保存按钮 */
.save-section {
	padding: 0 20px;
}

.save-btn {
	width: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border: none;
	border-radius: 12px;
	padding: 16px;
	color: white;
	font-size: 18px;
	font-weight: 500;
}

.save-btn[disabled] {
	opacity: 0.6;
}

.save-text {
	color: white;
	font-size: 18px;
	font-weight: 500;
}

/* 手机号修改弹窗 */
.phone-modal {
	width: 320px;
	background: white;
	border-radius: 12px;
	overflow: hidden;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #f0f0f0;
}

.modal-title {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.modal-close {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.close-icon {
	width: 16px;
	height: 16px;
}

.modal-content {
	padding: 20px;
}

.phone-input,
.code-input {
	width: 100%;
	padding: 12px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 15px;
	font-size: 16px;
}

.send-code-btn {
	width: 100%;
	background: #007aff;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 12px;
	font-size: 16px;
}

.modal-footer {
	display: flex;
	border-top: 1px solid #f0f0f0;
}

.modal-btn {
	flex: 1;
	padding: 16px;
	border: none;
	background: white;
	font-size: 16px;
}

.cancel-btn {
	color: #666;
	border-right: 1px solid #f0f0f0;
}

.confirm-btn {
	color: #007aff;
	font-weight: 500;
}
</style> 